<!--
 * @jixuanyu: jixuanyu
 * @Date: 2022-05-25 15:54:53
 * @LastEditors: jixuanyu
 * @Description: file content
-->
<template>
  <z-space direction="vertical" :size="12" style="width: 400px">
    <z-date-picker
      v-model:value="value1"
      format="YYYY-MM-DD"
      min="2022-05-22"
      max="2022-06-22"
    />
    <z-date-picker v-model:value="value2" min="2021-05" max="2022-06" picker="month" />
    <z-range-picker v-model:value="value3" min="2021-05-22" max="2022-06-22" picker="week" />
    <z-range-picker v-model:value="value4" min="2020" max="2022" picker="year" />
  </z-space>
</template>
<script>
import { defineComponent, ref } from 'vue'
import dayjs from 'dayjs'

export default defineComponent({
  name: 'DatePickerDemo7',
  setup(){
    return {
      dayjs,
      value1: ref(),
      value2: ref(),
      value3: ref(),
      value4: ref(),
    }
  }
})
</script>
